<template>
  <div class="main">
    <div class="login-box">
      <div class="title">账号登录</div>
      <el-form
        ref="form"
        class="form"
        :model="form"
        :rules="rules"
      >
        <el-form-item
          size="normal"
          prop="user_name"
        >
          <el-input
            ref="accountInput"
            v-model="form.user_name"
            placeholder="请输入账号"
            size="normal"
            clearable
            prefix-icon="el-icon-user"
          />
        </el-form-item>

        <el-form-item
          size="normal"
          prop="password"
        >
          <el-input
            v-model="form.password"
            placeholder="请输入密码"
            size="normal"
            clearable
            prefix-icon="el-icon-lock"
            show-password
          />
        </el-form-item>

        <el-form-item
          size="normal"
          prop="captcha_value"
        >
          <el-input
            v-model="form.captcha_value"
            placeholder="请输入验证码"
            size="normal"
            clearable
          >
            <template slot="append">
              <el-image
                v-if="codeImageUrl"
                style="width: 100px;height:auto;cursor: pointer;"
                :src="codeImageUrl"
                @click="codeImageClick"
              />
            </template>
          </el-input>
        </el-form-item>

      </el-form>

      <div class="button-box">
        <!-- <el-button
          style="color:#11A983"
          type="text"
          @click="phoneLogin"
        >手机号登录</el-button> -->
        <el-button
          style="color:#8C8C8C"
          type="text"
          @click="forgetPwd"
        >忘记密码?</el-button>
      </div>
      <el-button
        class="login-button"
        type="primary"
        size="default"
        :loading="loginBtnLoading"
        @click="loginBtnClick"
      >登录</el-button>

    </div>
  </div>
</template>
<script>
// import a from '../../static/login-background.png'
import service from '@/api/user'
// import accountService from '@/api/account-api'
// import { resetRouter } from '@/router/index'
// import { mapActions } from 'vuex'
export default {
  data() {
    return {
      loginBtnLoading: false,
      form: {},
      rules: {
        user_name: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ],
        captcha_value: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }
        ]
      },
      codeImageUrl: ''
    }
  },
  mounted() {
    this.getCaptchaId()
    // window.localStorage.setItem('resources', '')
    this.$refs.accountInput.focus()
  },
  created() {
    document.onkeydown = () => {
      const key = window.event.keyCode
      if (key === 13) {
        this.loginBtnClick()
      }
    }
  },
  methods: {
    forgetPwd() {
    //   this.$router.push({ name: 'ForgetPwd' })
    },
    loginBtnClick() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loginBtnLoading = true
          this.$store.dispatch('guser/login', this.form).then(_ => {
            this.loginBtnLoading = false
            // console.log(this.$store.state.guser.roles)
            // console.log(this.$store.state.guser.user_info)
            // console.log(this.$store.state.guser.resource)
            this.$router.push({ name: 'Home' })
          }).catch(err => {
            console.error(err)
            this.getCaptchaId()
          })
        }
      })
    },
    getCaptchaId() {
      service.getCaptchaId().then(it => {
        // this.CaptchaId = it.captchaId
        this.form.captcha_id = it.captchaId
        this.form.school_code = '10557'
        this.codeImageUrl =
            process.env.VUE_APP_BASE_API + 'user' + it.imageUrl
      })
    },
    codeImageClick() {
      this.getCaptchaId()
    }
  }
}
</script>
<style scoped>
.main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: calc(100vh);
}
.login-box {
  width: 421px;
  height: 474px;
  background: #ffffff;
  box-shadow: 0px 4px 23px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-family: Hiragino Sans GB;
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: 0.05em;
  color: #11a983;
  margin-top: 44px;
}

.form {
  margin: 34px 60px 0px;
}

.button-box {
  width: 300px;
  font-family: Microsoft YaHei;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  display: flex;
  justify-content: flex-end;
  /* align-items: flex-start; */
  letter-spacing: 0.05em;
  margin: 0px 60px;
  /* color: #438fff; */
}

.login-button {
  background-color: #11a983;
  width: 300px;
  height: 46px;
  font-family: Microsoft YaHei;
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  line-height: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.1em;
  color: #ffffff;
  margin: 37px 0px;
  border-radius: 4px;
}
</style>
